<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/register.css">
</head>

<body>
<div class="xtx-wrapper">
  <div class="container">
    <!-- 卡片 -->
    <div class="xtx-card">
      <h3>新用户注册</h3>
      <form class="xtx-form" action="/user/register">
        <div data-prop="username" class="xtx-form-item">
          <span class="iconfont icon-zhanghao"></span>
          <input name="name" type="text" placeholder="设置用户名称">
          <span class="msg"></span>
        </div>
        <div data-prop="phone" class="xtx-form-item">
          <span class="iconfont icon-shouji"></span>
          <input name="phone" type="text" placeholder="输入手机号码">
          <span class="msg"></span>
        </div>
        <div data-prop="password" class="xtx-form-item">
          <span class="iconfont icon-suo"></span>
          <input name="password" type="password" placeholder="设置4至20位字母、数字组合">
          <span class="msg"></span>
        </div>
        <div data-prop="confirm" class="xtx-form-item">
          <span class="iconfont icon-suo"></span>
          <input name="confirm" type="password" placeholder="请再次输入密码">
          <span class="msg"></span>
        </div>
        <div class="chk" style="padding-bottom: 10px;">
          <input type="checkbox">
          已阅读并同意<i style="color: rgb(39,186,155);">《用户服务协议》</i>
        </div>
        <div class="xtx-form-item">
          <button class="submit">下一步</button>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
  <script type="text/javascript">
    let submitButton = document.querySelector('.submit');
    let name = document.querySelector('input[name="name"]');
    let phone = document.querySelector('input[name="phone"]');
    let password = document.querySelector('input[name="password"]');
    let confirmPassword = document.querySelector('input[name="confirm"]');
    let agreementCheckbox = document.querySelector('input[type="checkbox"]');
    let usernameErrorMessage = document.querySelector('div[data-prop="username"] .msg');
    let phoneErrorMessage = document.querySelector('div[data-prop="phone"] .msg');
    let passwordErrorMessage = document.querySelector('div[data-prop="password"] .msg');
    let confirmPasswordErrorMessage = document.querySelector('div[data-prop="confirm"] .msg');
    submitButton.addEventListener('click', e => {
      // 1.同意协议必须勾选
      if (!agreementCheckbox.checked) {
        e.preventDefault(); // 阻止表单提交
        alert('请先同意用户服务协议。'); // 显示警告消息
      } else if (!(/^.{4,10}$/.test(name.value) && /^.{11}$/.test(phone.value) &&
              /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{4,20}$/.test(password.value)
              && confirmPassword.value === password.value)) {
        // 6.符合上述要求提交表单，否则组织表单提交并提示原因
        e.preventDefault(); // 阻止表单提交
        alert('注册信息错误'); // 显示警告消息
      } else { alert('注册成功'); }
    });
    // 2.账号由4~10位的字符组合
    name.addEventListener("blur", e => {
      if (!/^.{4,10}$/.test(name.value)) {
        usernameErrorMessage.textContent = '用户名必须由4至10位字符组成。';
      } else {
        usernameErrorMessage.textContent = '';
      }
    });
    // 3.手机号码由11位数字组合
    phone.addEventListener("blur", e => {
      if (!/^.{11}$/.test(phone.value)) {
        phoneErrorMessage.textContent = '手机号码必须由11位数字组成。';
      } else {
        phoneErrorMessage.textContent = '';
      }
    });
    // 4.密码是4~20位字母、数字组合
    password.addEventListener("blur", e => {
      if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{4,20}$/.test(password.value)) {
        passwordErrorMessage.textContent = '密码必须由4至20位字母、数字组成。';
      } else {
        passwordErrorMessage.textContent = '';
      }
    });
    // 5.两次密码输入一致
    confirmPassword.addEventListener("blur", e => {
      if (confirmPassword.value !== password.value) {
        confirmPasswordErrorMessage.textContent = '两次密码输入不一致。';
      } else {
        confirmPasswordErrorMessage.textContent = '';
      }
    });
    if (!/^.{4,10}$/.test(name.value)) {
      usernameErrorMessage.textContent = '用户名必须由4至10位字符组成。';
    }
  </script>
</html>